/**
 * Created by WH on 2017/11/22.
 */
$(function () {
    $('#type-title').text($('.swiper-wrapper dl:first').attr('type-title'));
    $("#totnum").text($('.card-select .select-num').length);

    var questionAnswer = '';
    //用来提交答题记录的模型
    // var questionDetail = {
    //     'UserId': userId,
    //     'Code': codeId,
    //     'PaperId': paperId,
    //     'CourseId': courseId,
    //     'QuestionList': []
    // };

    //题目轮播
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        paginationClickable: true,
        paginationBulletRender: function (index, className) {
            $("#totnum").text(index + 1);
            var html = '';
            html += '<span class="' + className + '">' + (index + 1) + '</span>'
            return html;//返回所有的页码html
        },
        onSlideChangeStart: function (swiper) {
            questionAnswer = '';
            $("#curnum").text(swiper.activeIndex + 1);//当前页
            $('#type-title').text($('.swiper-slide-active').attr('type-title'))
        }
    });

    /*点击答题卡标题号*/
    $('.card-select .select-num').click(function () {
        questionAnswer = '';
        var slideIndex = parseInt($(this).text()) - 1;
        $("#curnum").text($(this).text());
        $('#type-title').text($(".swiper-wrapper dl").eq(slideIndex).attr('type-title'));
        swiper.slideTo(slideIndex, 0, false);
        $(".maskwhite").toggle();
        $(".card-top").toggle();
    });

    //点击底部出现题目数card-close
    $("#showall").click(function () {
        $(".maskwhite").toggle();
        $(".card-top").toggle();
    });

    //点击底部隐藏题目数
    $(".card-close").click(function () {
        $(".maskwhite").toggle();
        $(".card-top").toggle();
    });

    /*获取答题卡选项*/
    function subCard() {
        questionDetail.QuestionList = [];
        var selectNum = $('.card-select .select-num.curr');
        for (var i = 0; i < selectNum.length; i++) {
            var optionDetail = {};
            var QuestionId = selectNum.eq(i).attr('question-id');
            var QuestionType = selectNum.eq(i).attr('question-type');
            var userAnswer = selectNum.eq(i).attr('question-answer');
            optionDetail.QuestionId = QuestionId;
            optionDetail.QuestionType = QuestionType;
            optionDetail.UserAnswer = userAnswer;
            questionDetail.QuestionList.push(optionDetail);
        }
        console.log('答题记录', questionDetail)
    }

    //点击底部出现题目数card-close
    $("#numok , .back-paper").click(function () {
        $(".maskwhite").toggle();
        $(".card-top").toggle();
    });

    /*点击答题卡标题号*/
    $('.select-num').click(function () {
        questionAnswer = '';
        var slideIndex = parseInt($(this).text()) - 1;
        $("#curnum").text($(this).text());
        $('#type-title').text($(".swiper-wrapper dl").eq(slideIndex).attr('type-title'));
        swiper.slideTo(slideIndex, 0, false);
        $(".maskwhite").toggle();
        $(".card-top").toggle();
    });

    $("#subno,.alert-close").click(function () {//取消
        $(".maskwhite").hide();
        $(".subjuan").hide();
        $('#numok .tab-label').css('color', '#333');
        $('#numok .navIcon').attr('src', '../../public/images/examView/bnt_jiaojuan_gray.png')
    });

    $('#backPage').click(function () {
        alert('小崔帅比');
    });

    //正确率扇形
    creatSector();
    function creatSector() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('sector1'));
        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                show: false,
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: '100%',
                    avoidLabelOverlap: false,
                    hoverAnimation:false,
                    legendHoverLink:false,
                    color: ['#0098e1', '#f3f3f3'],
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335},
                        {value:310}
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


});